<template>
	<div>
		<h2>查询条件</h2>
			
		<el-form ref="form1" :inline="true" :model="form" >
			<el-form-item label="姓名:" style="width:30%">
				<el-input v-model="form.username"></el-input>
			</el-form-item>
			<el-form-item label="学号:" style="width:30%">
				<el-input v-model="form.studentcard"></el-input>
			</el-form-item>
			<el-form-item label="学院:" style="width:30%">
				<el-input v-model="form.profession"></el-input>
			</el-form-item>

			<el-button type="success" size="small" @click="onSubmit(form)">查询</el-button>
			<el-button type="success" size="small" @click="reset(form)">重置</el-button>
		</el-form>

		
	</div>
	<div class="third">
			<el-table :data="dianListFilter" v-loading="dataLoading"  style="width: 100%" height="350">
				<!-- <el-table-column prop="bed" label="序号"/> -->
				<el-table-column prop="username" label="姓名"/>
				<el-table-column prop="studentcard" label="学号"/>
				<el-table-column prop="profession" label="学院"/>
				<el-table-column prop="order_pay" label="缴费金额"/>
				<el-table-column prop="tel" label="联系方式" />
			</el-table>
		</div>
</template>

<script setup name="assembly">
import { ref, onMounted, reactive } from "vue";
import { getDianInfo } from "@/api/admin/home";
import {ElMessage} from 'element-plus'

const form = reactive({
    username:'',
    studentcard:'',
    profession:''
})
let dianList = ref([])
let dianListFilter = ref([])
onMounted(()=>{
	getTableData()
})

// 获取数据
const getTableData=async()=>{	
    const {data:res}=await getDianInfo()
    dianList.value=res.data	
	console.log("ress",res.data	)
	dianListFilter.value = dianList.value
}

// 查询条件
const onSubmit=(item)=>{
	console.log("item",item);
	if(item.username || item.studentcard || item.profession) {
		dianListFilter.value = dianList.value.filter((List) => {
			return List.username==item.username || List.studentcard==item.studentcard || List.profession==item.profession
		})	
			
	}else{
		dianListFilter.value = dianList.value	
			
	}
	
}

// 重置
const reset= (item) => {
	item.username = "" 
	item.studentcard = "" 
	item.profession = "" 
	getTableData()
}
</script>

<style scoped lang="scss">
	.third{
		margin-top:30px;	
	}
</style>
